<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/taglibs.jsp"%>
<%
	String contextPath = request.getContextPath();
%>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="author" content="qinuoli">
<title>微信支付-使用JSSDK发起支付</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script src="<c:url value="/resources/jquery.js"/>"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<style type="text/css">
body {
	padding: 0px;
	margin: 0px auto;
}

body {
	background-color: #EEE;
}

.i-assets-container {
	border: 1px solid #E1E1E1;
	vertical-align: top;
	display: block;
	background-color: #FFF;
	margin: 5px 10px;
	color: #A1A1A1 !important;
}

#container.ui-container {
	color: #666;
}

.i-assets-content {
	margin: 10px 10px 10px 20px;
}

.fn-clear:after {
	visibility: hidden;
	display: block;
	font-size: 0px;
	content: " ";
	clear: both;
	height: 0px;
}

.i-assets-header h3 {
	font-size: 14px;
}

.fn-left {
	display: inline;
	float: left;
}

h3 {
	margin: 0px;
	padding: 0px;
	font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "Microsoft Yahei", "宋体";
}

.i-assets-balance-amount {
	line-height: 24px;
	margin-right: 20px;
}

.amount {
	font-size: 24px;
	font-weight: 400;
	color: #666;
	margin-left: 25px;
}

.amount .fen {
	font-size: 18px;
}

#wx_bottom {
	display: flex;
}

#wx_bottom {
	overflow: hidden;
	margin: 15px 0px;
}

#wx_bottom {
	display: box;
	display: -ms-box;
	display: -webkit-box;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
}

#wx_bottom  .a {
	width: 100%;
	height: 40px;
	line-height: 40px;
	margin: 0px 10px;
	border: 1px solid #DDD;
	text-align: center;
	border-radius: 3px;
	color: #666;
	background: #fff;
	text-decoration: none;
}

.WX_search {
	background-color: #EFEFEF;
	height: 40px;
	line-height: 40px;
	position: relative;
	border-bottom: 1px solid #DDD;
	text-align: center;
}

.pay_buttom {
	margin: 15px 0px;
	width: 100%;
	display: box;
	display: -ms-box;
	display: -webkit-box;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	width: 100%;
}

.pay_buttom a {
	height: 40px;
	line-height: 40px;
	margin: 0px 10px;
	border: 1px solid #DDD;
	text-align: center;
	border-radius: 3px;
	color: #666;
	background: #fff;
	text-decoration: none;
	width: 100%;
	display: block;
	flex: 1;
	-ms-flex: 1;
	-webkit-flex: 1;
	box-flex: 1;
	-ms-box-flex: 1;
	-webkit-box-flex: 1;
}
</style>
<body>

	<div class="WX_search">
		<p>订单支付信息确认</p>
	</div>
	<form action="" method="post">
		<div class="i-assets-container ui-bookblock-item">
			<div class="i-assets-content">
				<div class="i-assets-header fn-clear">
					<h3 class="fn-left">入款账户</h3>
				</div>
				<div class="i-assets-body fn-clear">
					<div class="i-assets-balance-amount fn-left">
						<strong class="amount"><span style="font-size: 15px;">上海***科技有限公司</span></strong>
					</div>

				</div>
			</div>
			<div class="i-assets-content">
				<div class="i-assets-header fn-clear">
					<h3 class="fn-left">商品名称</h3>
				</div>
				<div class="i-assets-body fn-clear">
					<div class="i-assets-balance-amount fn-left">
						<strong class="amount"><span style="font-size: 15px;" id="commodityName">红色系 莱肯超跑 * 1</span></strong>
					</div>

				</div>
			</div>
			<div class="i-assets-content">
				<div class="i-assets-header fn-clear">
					<h3 class="fn-left">支付总金额</h3>
				</div>
				<div class="i-assets-body fn-clear">
					<div class="i-assets-balance-amount fn-left">
						<strong class="amount"><span id="total">0.01</span></strong>元
					</div>

				</div>
			</div>
		</div>

		<div class="i-assets-container ui-bookblock-item">
			<div class="i-assets-content">
				<div class="i-assets-header fn-clear">
					<h3 class="fn-left">您需要支付金额</h3>
				</div>
				<div class="i-assets-body fn-clear">
					<div class="i-assets-balance-amount fn-left" style="color: #F37800;">
						<strong class="amount" style="color: #F37800;" id="totalPrice">0.01</strong>元
					</div>
				</div>
			</div>

		</div>

		<div class='pay_buttom'>
			<a href="#" style="background: #06C; color: #fff;" onclick="dopay();">确认支付</a>
		</div>
	</form>
	<script type="text/javascript">  
    var basePath = "<%=contextPath%>";
    
    /*执行支付请求*/
    function dopay() {
        
        //获取当前浏览器url全路径,如: http://zhoubang85.com/chooseWXPay.jsp
        var clientUrl = window.location.href;
        //请求后台，获取jssdk支付所需的参数
        $.ajax({
            type : 'post',
            url : '<%=contextPath%>
		/chooseWXPay/gopay',
				dataType : 'json',
				data : {
					"commodityName" : $("#commodityName").html(), //商品名称
					"totalPrice" : $("#totalPrice").html(), //支付的总金额
					"clientUrl" : clientUrl
				//当前页面所在的浏览器URL全路径,由于该支付为jssdk支付，所以需要url地址.参与后台sign签名
				},
				cache : false,
				error : function() {
					alert("系统错误，请稍后重试");
					return false;
				},
				success : function(data) {
					//微信支付功能只有微信客户端版本大于等于5.0的才能调用
					if (parseInt(data[0].agent) < 5) {
						alert("您的微信版本低于5.0无法使用微信支付");
						return;
					}
					//JSSDK支付所需的配置参数，首先会检查signature是否合法。
					wx.config({
						debug : true, //开启debug模式，测试的时候会有alert提示
						appId : data[0].appId, //公众平台中-开发者中心-appid
						timestamp : data[0].config_timestamp, //时间戳
						nonceStr : data[0].config_nonceStr, //随机字符串,不长于32位
						signature : data[0].config_sign, //这里的signature是后台使用SHA1签名算法得出，不是MD5，与下面的wx.chooseWXPay中的paySign不同，下面的paySign是后台使用MD5加密得出
						jsApiList : [ //指定哪些JS接口有权限访问
						'chooseWXPay' ]
					});

					/*
					    1、wx.chooseWXPay支付的回调：
					        a、success ： 支付成功后，会调用该回调方法
					        b、cancel ： 用户手动取消支付，关闭支付控件，会调用该回调方法
					        c、fail ： 支付失败，会调用该回调方法
					        d、complete ： 无论支付成功还是失败，都会调用该方法
					    2、通过1中的描述，发起支付后的回调可以有2种方式进行处理：
					        a、分别加入success、cancel、fail这3个回调函数，分别处理不同的支付状态，如：下方注释的代码片断。
					        b、只写一个complete回调函数，然后判断回调函数中的res对象的errMsg属性值，处理不同的支付状态.
					 */
					//上方的config检测通过后，会执行ready方法
					wx.ready(function() {
						wx.chooseWXPay({
							timestamp : data[0].timeStamp, // 支付签名时间戳。前端js中指定的timestamp字段均为小写。后台生成签名使用的timeStamp字段需大写其中的S字符，即：timeStamp
							nonceStr : data[0].nonceStr, // 支付签名随机串，不长于 32 位
							package : data[0].packageValue, // 统一支付接口返回的prepay_id参数值，格式：prepay_id=***）
							signType : "MD5", // 签名方式MD5，不是SHA1，后台使用MD5加密，与上面的wx.config中的signature不同。
							paySign : data[0].paySign, // 后台生成的支付签名串
							/*
							success: function (res) {
							    alert("支付成功！");
							    window.location.href = data[0].sendUrl; //成功后，跳转到自定义的支付成功的页面
							},
							cancel: function (res) {
							    alert("您已手动取消该订单支付。");
							},
							fail : function(res){
							    alert("订单支付失败。");
							},
							 */
							//该complete回调函数，相当于try{}catch(){}异常捕捉中的finally，无论支付成功与否，都会执行complete回调函数。即使wx.error执行了，也会执行该回调函数.
							complete : function(res) {
								alert("complete回调方法返回值" + res.errMsg);

								/*注意：res对象的errMsg属性名称，是没有下划线的，与WeixinJSBridge支付里面的err_msg是不一样的。而且，值也是不同的。*/
								if (res.errMsg == "chooseWXPay:ok") {
									alert("支付成功");
									window.location.href = data[0].sendUrl;
								} else if (res.errMsg == "chooseWXPay:cancel") {
									alert("你手动取消支付");
								} else if (res.errMsg == "chooseWXPay:fail") {
									alert("支付失败");
								} else if (res.errMsg == "config:invalid signature") {
									alert("支付签名验证错误，请检查签名正确与否 or 支付授权目录正确与否等");
								}
							}
						});
					});
					wx.error(function(res) {
						if (res.errMsg == "config:invalid url domain") {
							alert("微信支付(测试)授权目录设置有误");
						} else {
							alert("检测出问题:" + res.errMsg);
						}
					});
				}
			});
		}
	</script>
</body>
</html>